<template>
    <main-wrap ref="mianEle" class="collection" :loading="true" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0">
        <template v-slot:header>
            <Header title="我的藏品"/>
            <div class="ctopBox">
                <goods-type @change="getTabData"/>
            </div>
        </template>
        <div class="mianCon">
            <List :lists="page.lists" @refresh="refreshData"/>
            <empty v-if="page.finished && page.lists.length<1"/>
        </div>
        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import Image from '@/components/image.vue'
import {toast} from '@/utils/common.js'
import List from './components/list.vue'
import empty from '@/components/empty.vue'
import goodsType from './components/goodsType.vue'
export default {
    components:{
        mainWrap,
        Header,
        Image,
        List,
        empty,
        goodsType
    },
    setup(){
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            ggg:computed(()=>store.state.demo.backUrl),
            goodsCategoryId:'',
            keyword:'',
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            }
        })

        onMounted(()=>{
          // onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("arApi/get_my_goods", {
                        goodsCategoryId:state.goodsCategoryId || 0,
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        orderField: "",
                        orderType: "",
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.count) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const refreshData =async ()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getTabData = (tid)=>{
            state.goodsCategoryId = tid
            refreshData()
        }

        return {
            ...toRefs(state),
            onLoad,
            refreshData,
            getTabData
        }
    }
}
</script>

<style lang="scss" scoped>
    .mianCon{
        padding: 0 40px 30px 40px;
    }
    .artist{
        overflow: hidden;
        padding: 0 0 30px 10px;
        li{
            float: left;
            margin: 30px 0 0 0;
            padding: 0 0 0 30px;
            a{
                display: block;
                position: relative;
                z-index: 10;
                width: 320px;
                height: 460px;
                color: #fff;
                .imgbox{
                    width: 100%;
                    height: 280px;
                }
                .txtBox{
                    height: 180px;
                    background: rgba(14, 97, 97, 0.7);
                    text-align: center;
                    h5{
                        font-size: 30px;
                        font-weight: normal;
                        padding: 66px 0 0 0;
                        overflow: hidden;
                    }
                    p{
                        font-size: 28px;
                        color: #84A7A7;
                    }
                }
                .avater{
                    position: absolute;
                    z-index: 10;
                    top: 224px;
                    left: 50%;
                    margin: 0 0 0 -55px;
                    width: 110px;
                    height: 110px;
                    overflow: hidden;
                    border-radius: 50%;
                }
            }
        }
    }
    .adBtnBox{
        padding: 40px;
    }
    .ctopBox{
        padding: 0 40px 0 40px;
    }
</style>